@extends('layouts.back_stage')
@section('content')
    <style>
        .address {
            border-color: #cfdadd;border-radius: 2px;width: 150px;
            height: 30px;padding: 6px 10px;font-size: 12px;line-height: 1.42857143;margin-right:10px;
            color: #555;background-color: #fff;background-image: none;border: 1px solid #cfdadd;box-shadow: none;
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        table,th,td{text-align: center}
        b{color:red;}
        .count_sp{padding-bottom:20px;display:inline-block;}
        .count_status{padding-bottom:20px;display:inline-block;font-weight: bolder;}
        .loading-results{
            display: none!important;
        }
        .select2-search__field{
            display: none!important;
        }
        .js-example-basic-single{
            width: 150px;
            outline: none;
        }
        .company-info{
            margin-right:15px;
        }
        .get-top{
            margin-left:10px;
        }
        .startDistribution{
            display: none;
            margin-bottom: 20px;
            margin-left:10px;
        }
        .checkDistribution{
            padding:5px;
        }
        .removeDistribution{
            display: none;
            margin-left:10px;
        }
        .showDisInfo{
            cursor: pointer;
        }
        .table-info button{
            display: inline-block;
            margin-right:5px;
        }
        .model-box{
            width: 500px;
            position: fixed;
            height:100%;
            right:-500px;
            top:0;
            background-color:white;
            z-index: 9999;
            box-shadow: 0 0 5px #ccc;
            transition: all 0.5s;
            padding:20px;
        }
        .close-model{
            width:30px;
            height:30px;
            font-size:20px;
            float: right;  
            border: none;
            outline: none;
        }
        .choose-row{
            background: white;
        }
        .mask-box{
            width:100%;
            height:100%;
            position: fixed;
            z-index: 9998;
            background-color:rgba(0, 0, 0, 0.5);
            left:0;
            top:0;
            display: none;
            overflow: scroll;
        }
        .show_qr_info{
            color:skyblue;
            cursor: pointer;
            font-size:16px;
        }
        .qr_info_box{
            margin-bottom: 0px;
            border:1px solid black;
            display: none;
        }
        .qr_info_box li span:first-child{
            padding-left:10px;
        }
        .qr_info_box li span{
            text-align: left;
            width:50%;
            display: inline-block;
            color:black;
            font-size:14px;
        }
    </style>
    <link rel="stylesheet" href="{{env('CDN_DOMAIN_NAME')}}/css/commoncss/select2.min.css">
    <link rel="stylesheet" href="{{env('CDN_DOMAIN_NAME')}}/css/commoncss/number-pb.css?v0.0.1">
    <div class="container">
        <div style="padding:20px 0;"><h3>配货详情</h3></div>
        <table class="table table-hover table-info" id="default-table">
            <thead>
                <tr>
                    <th class="col-sm-2">序号</th>
                    <th class="col-sm-2">客户姓名</th>
                    <th class="col-sm-2">款号</th>
                    <th class="col-sm-2">颜色</th>
                    <th class="col-sm-2">订单数量</th>
                    <th class="col-sm-2">操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="mask-box"  onclick="closeModel()"></div>
        <div class="model-box">
            <button class="close-model" onclick="closeModel()">
                <i class="fa fa-close"></i>
            </button>
            <h3>配货信息</h3>
            <table class="table distributionInfo">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th class="qr_type">包码编号</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <script src="{{env('CDN_DOMAIN_NAME')}}/js/commonjs/select2.min.js"></script>
    <script src="{{env('CDN_DOMAIN_NAME')}}/js/commonjs/table-dragger.min.js"></script>
    <script src="{{env('CDN_DOMAIN_NAME')}}/js/commonjs/number-pb.js"></script>
    <script src="{{env('CDN_DOMAIN_NAME')}}/js/commonjs/jquery.velocity.min.js"></script>
    <script>
        (function ($) {
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }
        })(jQuery);
        var dragger;
        $(document).ready(function(){
            var id = $.getUrlParam('id');
            $.ajax({
                url:'/picking/distribution-record-details-data',
                type:'get',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                type:'get',
                dataType:'json',
                data:{
                    id:id
                },
                success:function(res){
                    if(res.result.success == true){
                        var option = "";
                        $.each(res.content.data,function(idx,obj){
                            option += "<tr>"+
                            "<td>"+(idx+1)+"</td>"+
                            "<td>"+obj.username+"</td>"+
                            "<td>"+res.content.girard+"</td>"+
                            "<td>"+res.content.color+"</td>"+
                            "<td>"+(obj.nums+res.content.unit)+"</td>"+
                            "<td><button class='btn btn-info open_details' abc='"+obj.id+"' def='"+res.content.type+"'>详情</button></td>"+
                            "</tr>"
                        });
                        $('#default-table tbody').html(option);
                        if(res.content.type == 1){
                            $('.qr_type').text('包码编号');
                        }else if(res.content.type == 2){
                            $('.qr_type').text('散码编号');
                        }
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(res.result.errorMsg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                },
            });
        });
        $(document).on('click','.open_details',function(){
            var id = $(this).attr("abc");
            var type = $(this).attr("def");
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                url: '/picking/distribution-info',
                type: 'get',
                data: {
                    id:id,
                    type:type
                },
                dataType: 'json',
                success: function(res){
                    if(res.result.success == true){
                        $('.distributionInfo tbody').html("");
                        $.each(res.content,function(idx,obj){
                            if(type == 1){
                                $('.distributionInfo tbody').append('<tr>'+
                                    '<td>'+(Number(idx)+1)+'</td>'+
                                    '<td class="show_qr_info">'+obj.qrcode+
                                    '<ul class="qr_info_box">'+
                                    '</ul></td>'+
                                '</tr>');
                            }else if(type == 2){
                                $('.distributionInfo tbody').append('<tr>'+
                                    '<td>'+(Number(idx)+1)+'</td>'+
                                    '<td>'+obj.qrcode+
                                    '</td>'+
                                '</tr>');
                            }
                        });
                        $('.model-box').css('right','0px');
                        $('.mask-box').show();
                        $('.model-box').attr('abc',id);
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(res.result.errorMsg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            });
        });
        $(document).on('click','.show_qr_info',function(){
            var order_num = $(this).text();
            var length = $(this).parent().index();
            if($(this).children('ul').html() == ""){
                $.ajax({
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    url: '/picking/packet-code-info',
                    type: 'get',
                    data: {
                        order_num:order_num
                    },
                    dataType: 'json',
                    success: function(res) {
                        if(res.result.success == true){
                            var option = "";
                            $.each(res.content,function(idx,obj){
                                option += "<li><span>"+(idx+1)+"</span><span>"+obj.qrcode+"</span></li>"
                            });
                            $('.distributionInfo tbody tr').eq(length).children('.show_qr_info').children('.qr_info_box').html(option);
                            $('.distributionInfo tbody tr').eq(length).children('.show_qr_info').children('.qr_info_box').show();
                        }else{
                            $(".faceImg").attr("src","/img/weep.png");
                            $(".oHandle").text(res.result.errorMsg);
                            $(".oSuccess").show(0).delay(1000).hide(0);
                        }
                    }
                });
            }else{
                if($(this).children('ul').is(":hidden")){
                    $('.distributionInfo tbody tr').eq(length).children('.show_qr_info').children('.qr_info_box').show();
                }else{
                    $('.distributionInfo tbody tr').eq(length).children('.show_qr_info').children('.qr_info_box').hide();
                }
            }
        });
        function closeModel(){
            $('.model-box').css('right','-500px');
            $('.table-info tr').removeClass('choose-row');
            $('.mask-box').hide();
        }
    </script>
@endsection